*{
	margin: 0;
	padding: 0;
}
html,body{
	width: 100%;
	height: 100%;
	background-color: #f5f5f5; 
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #333;
}
#box{
	width: 100%;
	height: 100%;
	position: relative;
}
#content{
	width: 100%;
	height: 100%;
}
#top{
	width: 100%;
	height: 120px;
	padding: 0px 15px;
	box-sizing: border-box;
	padding-top: 10px;
	position: fixed;
	top: 0px;
	z-index: 10;
	background-color: #fff;
}
#search{
	width: 100%;
	height: 50px;
	padding:5px 0px;
	box-sizing: border-box;
}
#search>input{
	width: 80%;
	height: 30px;
	/* margin-top: 7px; */
	border-radius: 60px;
	outline: none;
	float: right;
	text-align: center;
	
}
#nav{
	width: 100%;
	height: 50px;
	line-height: 50px;
	/* background-color: aliceblue; */
}

#nav>a{
	float: left;
	width:25%;
	height:100%;
	line-height: 50px;
	text-align: center;
	z-index: 5;
}
#select_con{
	width: 345px;
	height: 1000px;
	margin: 140px auto;
	/* border: 1px solid black; */
}
.se_content{
	width: 100%;
	height: 100%;
	/* background-color: #00C0EF; */
	
}
#hobby{
	height:400px ;
}
.ul_list{
	width: 100%;
	height: 100%;
}
.ul_list>li{
	height: 110px;
	padding: 5px 10px;
	margin: 8px 0px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #fff;
	border: 1px solid black;
}
.ul>li>h5{
	width: 280px;
}
.h_bottom{
	margin-left: 10px;
}
.h_time{
	padding: 5px 0px;
	font-size: 14px;
	color: #ababab;
}
.h_time:before{
	content: "开课时间：";
}
.h_teacher{
	width: 150px;
	font-size: 14px;
	color: #ababab;
}
.h_peo{
	width: 120px;
	float:right ;
	font-size: 14px;
	color: #ababab;
	margin-top: -20px;
}
.h_peo:before{
	content: "已有";
}
.h_peo:after{
	content: "人参加";
}
.h_bottom>img{
	width: 30px;
	border-radius: 50%;
}
#hobby>h4{
	padding: 5px 0px;
	box-sizing: border-box;
}
.flag{
	width: 18%;
	height: 16%;
	font-size: 12px;
	float: left;
	text-align: left;
	text-align: center;
	margin-top: 2px;
	margin-right:5px ;
	border-radius: 10px;
	background-color: #e4e1e3;
}
.free{
	color: red;
	font-size: 20px;
	float: right;
	margin-top: -50px;
	margin-right: 20px;
}
#nav>.router-link-active{
	color: aquamarine;
	font-size: 20px;
	
}



.main{
	width:100%;
	height:60px;
	background:white;
	position: fixed;
	bottom:0px;
	left:0px;
}
.main>a{
	color: gray;
	text-decoration: none;
	float: left;
	width:33.3%;
	height:100%;
	line-height: 40px;
	text-align: center;
}
/* 优先级问题 */
.main>.router-link-active{
	color:#1afa29;
	background:gainsboro;
}
.main>a>.sp1{
	position: relative;
	display: block;
	background:url(../img/index01.png);
	background-size: 70%;
	background-repeat: no-repeat;
	top: 20%;
	left: 39%;
	width:33.3%;
	height:50%;
	line-height: 20px;
	
}
.main>.router-link-active>.sp1{
	background:url(../img/index02.png);
	background-size: 80%;
	background-repeat: no-repeat;
}
.main>a>.sp2{
	position: relative;
	display: block;
	background:url(../img/study.png);
	background-size: 70%;
	background-repeat: no-repeat;
	top: 20%;
	left: 39%;
	width:33.3%;
	height:50%;
	line-height: 20px;
	
}
.main>.router-link-active>.sp2{
	background:url(../img/study1.png);
	background-size: 80%;
	background-repeat: no-repeat;
}
.main>a>.sp3{
	position: relative;
	display: block;
	background:url(../img/my01.png);
	background-size: 70%;
	background-repeat: no-repeat;
	top: 20%;
	left: 38%;
	width:33.3%;
	height:50%;
	line-height: 20px;
	
}
.main>.router-link-active>.sp3{
	background:url(../img/my02.png);
	background-size: 80%;
	background-repeat: no-repeat;
}

/* 底部导航栏 */
/* .router-link-active{
	color: #2E8B57;
	background:gainsboro;
} */
/* .main{
	width:100%;
	height:40px;
	background:white;
	position: fixed;
	bottom:0px;
	left:0px;
	margin-top: 20px;
	z-index: 20;
}
.main>a{
	text-decoration: none;
	float: left;
	width:33.3%;
	height:100%;
	line-height: 40px;
	text-align: center;
	z-index: 5;
}
.main>a>span{
	width: 24%;
	height: 40%;
}
.main>a>.sp1{
	position: relative;
	display: block;
	background:url(../img/index.png);
	background-size: 100% 100%;
	top: 20%;
	left: 33.5%;
	line-height: 20px;
	
}
.main>.router-link-active>{
	color: #2E8B57;
	background:gainsboro;
}
.main>.router-link-active>.sp1{
	background:url(../img/index1.png);
	background-size: 100% 100%;
}
.main>a>.sp2{
	position: relative;
	display: block;
	background:url(../img/study.png);
	background-size: 100% 100%;
	top: 20%;
	left: 33.5%;
	line-height: 20px;
	
}
.main>.router-link-active>.sp2{
	background:url(../img/study1.png);
	background-size: 100% 100%;
}
.main>a>.sp3{
	position: relative;
	display: block;
	background:url(../img/myi.png);
	background-size: 100% 100%;
	top: 20%;
	left: 33.5%;
	line-height: 20px;
	
}
.main>.router-link-active>.sp3{
	background:url(../img/my(2).png);
	background-size: 100% 100%;
} */


